<template>
	<view class="page">
		<view class="top">
			<view class="teacher-info dis-flex flex-y-center">
				<view class="f-s-0">
					<image class="image-box" :src="pageInfo.headeravatar" mode="aspectFill" lazy-load></image>
				</view>
				<view>
					<view class="navy_blue name f_normal onelist-hidden">{{pageInfo.title}}{{pageInfo.nickname}}</view>
					<view class="f_26 gery1">教龄{{pageInfo.year}} · 已授{{pageInfo.course_count}}课</view>
				</view>
			</view>
			<view class="dis-flex flex-x-between box">
				<view class="f_28 gery1">课程语种</view>
				<view class="f_28 navy_blue">{{pageInfo.language}}</view>
			</view>
			<view class="dis-flex flex-x-between box">
				<view class="f_28 gery1">授课方式</view>
				<view class="f_28 navy_blue">{{pageInfo.typeStr}}</view>
			</view>
			<view class="dis-flex flex-x-between box">
				<view class="f_28 gery1">地址信息</view>
				<view v-if="pageInfo.typeId==1" class="f_28 w450" @tap.stop="closeBalanceLowPopup">
					<view :class="addressIndex!=-1?'navy_blue':'f-c-7f4aff'">
						<view v-if="addressIndex!=-1">
							<view class="detail dis-flex flex-x-end">
								<view class="detail onelist-hidden t-r">
									<text>{{addressList[addressIndex].province.name}}</text>
									<text>{{addressList[addressIndex].city.name}}</text>
									<text>{{addressList[addressIndex].area.name}}</text>
									<text>{{addressList[addressIndex].address}}</text>
								</view>
								<image class="address-next" :src="imgPrefix('/static/image/icon/address_next.png')" lazy-load></image></view>
							<view class="m-t-10 dis-flex flex-x-end"><text class="m_r_18">{{addressList[addressIndex].username}}</text>{{addressList[addressIndex].phone}}</text></view>
						</view>
						<view v-else class="t-r">
							请选择上门地址
							<image lazy-load class="address-next" :src="imgPrefix('/static/image/icon/address_next.png')"></image>
						</view>
					</view>
				</view>
				<view v-else class="f_28 w450">
					{{pageInfo.address}}
				</view>
			</view>
		</view>
		<view class="bottom" v-if="selectedList.length==0">
			<view class="title-box">
				<view class="f_32 f_normal title">购买课次</view>
				<view class="f_24 gery1 f_normal">为保证教学质量，请购足够课次</view>
			</view>
			<view class="dis-flex count-box flex-x-between">
				<view class="f_28 f_normal flex-box">
					总额：￥<text class="f_48 f_normal">{{payMoney}}</text>
				</view>
				<view class="dis-flex flex-y-center">
					<view class="subtract f-s-0" @tap.stop="setInput(inputValue>1?inputValue-1:1)"><image :src="imgPrefix('/static/image/icon/subscribe_course_subtract.png')" lazy-load></image></view>
					<input type="number" :maxlength="maxValue.toString().length" class="count" :value="inputValue" @input="getValue" />
					<view class="add f-s-0" @tap.stop="setInput(inputValue+1<maxValue?inputValue+1:maxValue)"><image :src="imgPrefix('/static/image/icon/subscribe_course_add.png')" lazy-load></image> </view>
				</view>
				
			</view>
		</view>
		<!-- 课程信息 start -->
		<view class="course-info-box navy_blue">
			<view class="title f_32 f_normal">课程信息</view>
			<view class="dis-flex item flex-x-between">
				<view class="f_28 gery1">课程单价</view>
				<view class="f_28"><text>￥{{pageInfo.price}}</text>/{{pageInfo.hour>1?pageInfo.hour:''}}小时</view>
			</view>
			<view class="dis-flex item flex-x-between">
				<view class="f_28 gery1">课程次数</view>
				<view class="f_28">{{inputValue}}次</view>
			</view>
			<view class="dis-flex item flex-x-between">
				<view class="f_28 gery1">总课时长</view>
				<view class="f_28">￥{{pageInfo.hour*inputValue}}小时</view>
			</view>
			<view class="total dis-flex flex-x-end f_28">
				合计：<text :class="[selectedList.length>0?'orange':'']">￥</text>
				<text class="font_bebas f_40" :class="[selectedList.length>0?'orange':'']">{{payMoney}}</text>
			</view>
		</view>
		<!-- 课程信息 end -->
		<!-- 意向上课时间 star -->
		<view class="dates-box" v-if="selectedList.length>0">
			<view class="title f_32">意向上课时间</view>
			<view class="block_list_view">
				<view class="time_list" :style="{height:showTimeListHasMore?timeHeight[isShowMore ? 1 : 0]:'unset'}">
					<block v-for="(dItem, dIndex) in selectedList" :key="dIndex">
						<view v-for="(tItem, tIndex) in dItem.times" :key="tIndex" class="time_item navy_blue">
							<text>{{returnDayAWeek(dItem.date)}} {{ tItem }}</text>
						</view>
					</block>
				</view>
				<view v-show="showTimeListHasMore" class="f_26 more t-c"  @tap.stop="bindShowMore">
					{{isShowMore?'收起':'查看全部'}}
				</view>
			</view>
		</view>
		<!-- 意向上课时间 end -->
		<!-- 支付方式 start-->
		<view class="payment-box">
			<view class="title f_32 f_normal">支付方式</view>
			<view v-for="(item,index) in payment" :key="index" class="dis-flex item flex-x-between" @tap.stop="paymentToggle(index)">
				<view class="dis-flex flex-y-center">
					<image class="icon" :src="imgPrefix(item.icon)" lazy-load></image>
					<view class="f_28">{{item.title}}<text v-if="index==1" class="f_24 gery1">（剩余{{balance||0}})</text> </view>
				</view>
				<view class="payment-index"><image lazy-load :src="paymentIndex==index?imgPrefix('/static/image/icon/payment_selected.png'):imgPrefix('/static/image/icon/address_status_0.png')"></image></view>
			</view>
		</view>
		<!-- 支付方式 end -->
		<!-- btn -->
		<view class="btn-box dis-flex flex-x-between">
			<view class="choose f_32 t-c" @tap.stop="bindSelectTimeBtn">选择上课时间</view>
			<view class="pay f_32 t-c" @tap.stop="bindPayBtn">去支付</view>
		</view>
		<!-- 地址选择-->
		<zan-popup :show="showAddressPopup" :type="location" @close="closeBalanceLowPopup">
			<view class="popup">
				<view class="p-head dis-flex  flex-y-center flex-x-center">
					<view class="f_32 flex-box t-c">选择地址</view>
					<image :src="imgPrefix('/static/image/icon/address_close.png')" @tap.stop="closeBalanceLowPopup"></image>
				</view>
				<!-- 循环地址列表 -->
				<view class="addressList-box">
					<view class="item dis-flex flex-y-center" v-for="(item,index) in addressList" :key="index"  @tap.stop="change_status(item.address_id,index)">
						<view class="status">
							<image lazy-load :src="addressId!=item.address_id?imgPrefix('/static/image/icon/address_status_0.png'):imgPrefix('/static/image/icon/address_status_1.png')"></image>
						</view> 
						<view class="info flex-box" :style="index==addressList.length-1?'border-bottom: 0;':''">
							<view class="detail f_28 onelist-hidden">
								<text>{{item.province.name}}</text>
								<text>{{item.city.name}}</text>
								<text>{{item.area.name}}</text>
								<text>{{item.address}}</text>
							</view>
							<view class="dis-flex f_24 flex-x-between">
								<view class="f-c">
									<text class="m_r_24">{{item.username}}</text>
									<text>{{item.phone}}</text>
								</view>
								<view class="">
									<text @tap.stop="update(item,index)" class="m_r_40 f-c-1cbc7b">编辑</text>
									<text @tap.stop="del(item.address_id)" class="f-c-fb4e44">删除</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btnbox" @tap.stop="pageTo('/pages/add_address/index')">
					<view class="btn f_32 dis-flex flex-y-center flex-x-center">
						新增地址
					</view>
				</view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
const app = getApp();
import zanPopup from '@/components/popup/index.vue';
import {toPage,format} from '@/static/uitls/common.js';
import API from '@/static/api/index.js';
import { commonMixinFun } from '@/static/mixins/common.js';
import uniPay from '@/static/uitls/uniPay.js'
export default{
	name:'subscribCourse',
	components: {
		zanPopup
	},
	mixins: [commonMixinFun],
	data(){
		return{
			addressIndex:-1,//地址下标
			isShowMore:true,//是否展示意向上课时间
			timeHeight:['200rpx','100%'],
			addressId:-1,//所选地址ID
			location:'bottom',//弹出层位置
			showAddressPopup: false, //是否地址弹出层
			pageInfo:{},
			
			//地址列表
			addressList:[],
			payment:[//支付方式
				{title:'微信支付',icon:'/static/image/icon/wechat.png'},
				{title:'余额支付',icon:'/static/image/icon/balance.png'}
			],
			inputValue:12, // 购买数量
			maxValue:999,//购买最大数量
			// payMoney:0, //支付金额 计算属性
			balance:0,//余额
			paymentIndex:0,//已选支付方式
			// selectedList:[], // 选择时间列表  计算属性
			bindDayList:{},//选择时间
		}
	},
	onLoad(option){
		app._log(option)
		if(option!=null){
			let tempObj = {}; // 临时对象
			for(let i in option){
				tempObj[decodeURIComponent(i)]=decodeURIComponent(option[i])
			}
			this.pageInfo = Object.assign(tempObj,this.pageInfo);
		}
		// {headeravatar: "https%3A%2F%2Fkeyu.lclook.com%2Fuploads%2F20200724%2F3cf937a82c389e844204a873ae38ba67.png", title: "%E6%8E%A8%E8%8D%90%E6%B5%8B%E8%AF%95", nickname: "%E8%AE%B8%E8%8}
	},
	onShow() {
		uni.$on('watchArr', res => {
			//监听选择列表变化
			this.bindDayList = res.bindDayList;
			// app._log(res);
			this.timeHeight = ['200rpx','100%'];
			setTimeout(()=>{
				const query = uni.createSelectorQuery().in(this);
				query.select('.time_list').boundingClientRect(data => {
					let height = (data.height*750 / uni.getSystemInfoSync().windowWidth)
				  this.timeHeight = [(height>200?200:height)+'rpx',height+'rpx'];
				  this.isShowMore=false;
				}).exec();
			},50)
			// 清除监听
			uni.$off('watchArr');
		});
		//获取地址列表
		this._getAddressList()
		this.getUserInfo();
	},
	computed:{
		// 是否需要显示选择时间更多按钮
		showTimeListHasMore:function(){ //
			return Number(this.timeHeight[1].substring(0,3))>200
		},
		// 支付金额
		payMoney:function(){
			let {inputValue,pageInfo,balance,paymentIndex}=this;
			if(inputValue<0){ // 不知道为什么输入框判断有问题，再判断一遍
				this.inputValue = Math.abs(inputValue)
			}
			let price = Math.round(inputValue*pageInfo.price*100)/100;
			if(price>balance&&paymentIndex!=0){ // 购买金额大于余额
				this.paymentIndex = 0;
			}
			return price
		},
		selectedList:function(){// 已经选择了的时间列表
			let {bindDayList}=this;
			let dkeysSorted = Object.keys(bindDayList).sort((a,b)=>{ return new Date(a) - new Date(b)})
			let newD = [];
			dkeysSorted.forEach((e,i)=>{
				let obj  = {date:e,times:[]};
				let {selectTimeList} = bindDayList[e];
				let tkeysSorted = Object.keys(selectTimeList).sort((a,b)=>{ return new Date(e+' '+selectTimeList[a].split(':')[0]+':00') - new Date(e+' '+selectTimeList[b].split(':')[0]+':00')})
				// app._log(tkeysSorted)
				tkeysSorted.forEach((te,ti)=>{
					obj.times.push(selectTimeList[te])
				})
				newD.push(obj);
			})
			return newD;
		}
	},
	methods:{
		getUserInfo(){
			API.getUserInfo().then(res=>{
				if(res.code==1){
				app._log(res)
					this.balance=res.data.user.money
				}else{
					this.balance=0
					this.showToast('获取余额失败，请稍后再试')
				}
			}).catch(err=>{
				this.balance=0
				this.showToast('获取余额失败，请稍后再试')
			})
		},
		//用户地址列表
		_getAddressList(loading=true){
			API.getAddressList(loading).then(res=>{
				if(res.code==1){
					this.addressList=res.data.address
					if(this.addressId!=-1){
						for (let i = 0; i < this.addressList.length; i++) {
							if(this.addressId==this.addressList[i].address_id){
								this.addressIndex=i
							}
						}
					}
				}else if(res.code==405){//暂无数据
					this.addressList = []
					this.addressIndex=-1
				}
			}).catch(err=>{
				this.addressList = []
				this.addressIndex=-1
			})
		},
		// 返回节点日期和星期
		returnDayAWeek(monthStr) {
			return format(new Date(monthStr), 'yyyy年MM月dd日') + ' 周' + '日一二三四五六'.charAt(new Date(monthStr).getDay());
		},
		bindShowMore(){
			this.isShowMore=!this.isShowMore;
		},
		getValue(e){
			let {value}=e.detail;
			value = Math.abs(value);
			this.inputValue =this.maxValue>value?value:this.maxValue;
		},
		setInput(value){
			this.inputValue = value
		},
		bindSelectTimeBtn(){
			let {bindDayList,inputValue,pageInfo}=this;
			// bindDayList
			toPage('/pages/select_time/index',{bindDayList:JSON.stringify(bindDayList),courseNum:inputValue,teacher_id:pageInfo.teacher_id,teacher_course_id:pageInfo.teacher_course_id,hour:pageInfo.hour})
		},
		bindPayBtn(){
			let {paymentIndex,pageInfo,addressIndex}=this;
			if(pageInfo.typeId==1&&addressIndex==-1){
				this.showToast('请选择地址');
				return false;
			}
			let that = this
			if(paymentIndex==1){
				uni.showModal({
				    title: '提示',
				    content: '确认使用余额支付吗？',
				    success: function (res) {
				        if (res.confirm) {
							that.toPay()
				        }
				    }
				})
			}else{
				this.toPay()
			}
		},
		// 确认开始支付
		toPay(){
			app.requestSubscribeMessage('order_success',()=>{
				let {paymentIndex,pageInfo,inputValue,addressList,addressIndex,selectedList}=this;
				let obj = {
					teacher_course_id:pageInfo.teacher_course_id,
					classdata:pageInfo.typeId,
					num:inputValue,
					address:(pageInfo.typeId==1?addressList[addressIndex]:pageInfo).address,
					address_id:pageInfo.typeId==1?addressList[addressIndex].address_id:0,
					username:pageInfo.typeId==1?addressList[addressIndex].username:pageInfo.nickname,
					phone:(pageInfo.typeId==1?addressList[addressIndex]:pageInfo).phone,
					pay_type:paymentIndex==0?2:1,
					course:[]
				}
				app._log(selectedList)
				if(selectedList.length>0){
					selectedList.forEach(e=>{
						for(let val of e.times){
							obj.course.push({date:e.date,time:val})
						}
					})
				}
				// course:[{date:'2020/08/14',time:'08:00-09:00'},{date:'2020/08/14',time:'08:00-09:00'},{date:'2020/08/14',time:'08:00-09:00'}]
				API.sendOrder(obj).then(res=>{
					app._log(res)
					if(res.code==1){
						let {course_order_id }=res.data
						if(paymentIndex==0){ // 微信支付
							uniPay(res.data).then(resp=>{
								app.requestSubscribeMessage('payOrder')
								app._log(res)
								if(res.code==1){
									this.payCallBack(res.data.out_trade_no);
								}else{
									this.showToast(res.hasOwnProperty('msg')?res.msg:res.hasOwnProperty('data').msg?res.data.msg:'支付失败')
								}
							}).catch(err=>{
								uni.showModal({
									title:'支付失败',
									content:'是否前往查看订单？',
									success: resp => {
										if(resp.confirm){
											toPage('/pages/order_detail/index',{orderId:course_order_id},'redirect')
										}else if(resp.cancel){
											uni.navigateBack({delta:1})
										}
									}
								})
								app._log(err,course_order_id)
							})
						}else{//余额支付
							this.paySuccessCallback(course_order_id)
						}
					}else{
						this.showToast(res.msg||'支付失败')
					}
				})
			})
		},
		payCallBack(orderNo){
			API.checkNotify(orderNo).then((res)=>{
				if(res.code==1){
					this.paySuccessCallback(res.data.course_order_id)
				}else{
					this.showToast(res.hasOwnProperty('msg')?res.msg:res.hasOwnProperty('data').msg?res.data.msg:'支付失败')
				}
			}).catch(err=>{
				this.showToast('支付失败')
			})
		},
		paySuccessCallback(id){ // 支付成功回调
			uni.showModal({
				title:'支付成功',
				cancelText:'查看课程',
				cancelColor:'#666',
				confirmColor:'#666',
				confirmText:'查看订单',
				success: resp => {
					if(resp.confirm){
						toPage('/pages/order_detail/index',{orderId:id},'redirect')
					}else if(resp.cancel){
						toPage('/pages/index/index',{},1)
					}
				}
			})
		},
		paymentToggle(index){
			if(index==1&&this.payMoney>this.balance){
				uni.showModal({
					title:'温馨提示',
					content:'余额不足，是否前往充值',
					success:res=>{
						if(res.confirm){
							toPage('/pages/my_account/index',{needReturn:true})//需要返回当前页面
						}
					}
				})
				return false;
			}
			this.paymentIndex=index
		},
		update(item,index){
			toPage('/pages/add_address/index',{address_id:item.address_id,type:'update'})
		},
		del(address_id){
			let that = this
			app._log("del")
			uni.showModal({
			    content: '您确定要删除吗？',
			    success: function (res) {
			        if (res.confirm) {
						API.delAddress(address_id).then(res=>{
							if(res.code==1){
								that.showToast('删除成功','success')
								that.addressIndex=-1
								that._getAddressList(false)//重新请求
							}else{
								that.showToast(res.msg)
							}
						})
			        }
			    }
			});
		},
		change_status(id,index){
			this.addressId=id
			this.addressIndex=index
			this.closeBalanceLowPopup()
		}, 
		closeBalanceLowPopup(delay = 0) {
			setTimeout(() => {
				this.showAddressPopup = !this.showAddressPopup ;
			}, delay);
		},
		toTeacherDetail(){
			
		}
	}
}
</script>

<style scoped lang="scss">
	.w450{
		width: 450rpx!important;
	}
	.orange{
		color: #ff6f03;
	}
	.f-s-0{font-size: 0;}
	.page{
		padding-top: 24rpx;
		
			padding-bottom: calc(128rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
	}
	.box{
		padding-top: 26rpx;
	}
	.top{
		margin: 0 48rpx 16rpx 48rpx;
		padding: 0 24rpx 26rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		.name{
			margin-bottom: 12rpx;
			font-family:PingFang SC;
		}
		.teacher-info{
			padding: 24rpx 0;
			border-bottom: 1px solid rgba(237,237,237,0.7);
			.image-box{
				width: 96rpx;
				height: 96rpx;
				border-radius: 32rpx;
				margin-right: 20rpx;
			}
		}
		.address-next{
			width: 32rpx;
			height: 32rpx;
			margin-left: 4rpx;
			vertical-align: middle;
		}
		.f-c-7f4aff{
			color: #7f4aff!important;
		}
		
	}
	.popup{
		max-height: 862rpx;
		width: 750rpx;
		background: white;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		color: #252748;
		.p-head{
			height: 92rpx;
				image{
					position: relative;
					right: 48rpx;
					width: 32rpx;
					height: 32rpx;
				}
		}
		.btnbox{
			background-color: white;
			position: fixed;
			width: 750rpx;
			bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.btn{
				height: 92rpx;
				background-color: #f0f0f6;
				border-radius: 24rpx;
				margin: 48rpx;
				color: #252748;
			}
		}
	}
	.addressList-box{
		padding-bottom: 188rpx;
		
		padding-left:48rpx ;
		max-height: 770rpx;
		overflow-y: scroll;
		.status{
			margin-right: 16rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.info{
			border-bottom: 1px solid #ededed;
			padding: 32rpx 48rpx 32rpx 0;
			.detail{
				width: 600rpx;
				color: #252748;
				margin-bottom: 20rpx;
				text{
					margin-right: 10rpx;
				}
			}
			.f-c{
				color: #8f8f9a;
			}
		}
	}
	.f-c-1cbc7b{
		color: #1cbc7b;
	}
	.f-c-fb4e44{
		color: #fb4e44;
	}
	.detail{
		width: 450rpx;
	}
	.detail text{
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bottom{
		margin-top: 24rpx;
		padding: 24rpx;
		background-color: white;
		background-image: linear-gradient(0deg, 
			#ffffff 0%, 
			#f3efff 100%);
		border-radius: 16rpx;
		margin: 0 48rpx;
		image{
			width: 44rpx;
			height: 44rpx;
		}
		.title-box{
			padding-bottom: 24rpx;
			border-bottom: 1px solid #f2f2f2;
			.title{
				margin-bottom: 10rpx;
			}
		}
		.count-box{
			padding-top: 30rpx;
			.count{
				margin: 0 24rpx;
				max-width: 60rpx;
				text-align: center;
			}
		}
		.f_48{
			font-size: 48rpx;
			color: #ff6f03;
		}
	}
	
	.btn-box{
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: white;
		padding-top: 12rpx;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		.choose{
			width: 316rpx;
			line-height: 92rpx;
			color: #ffffff;
			background-image: linear-gradient(270deg, 
				#7f4aff 0%,
				#ab7bff 100%);
			border-radius: 16rpx;
			margin-left: 48rpx;
		}
		.pay{
			width: 316rpx;
			line-height: 92rpx;
			color: #ffffff;
			background-image: linear-gradient(270deg, 
				#7f4aff 0%, 
				#ab7bff 100%);
			border-radius: 16rpx;
			margin-right: 48rpx;
		}
	}

	.course-info-box{
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 16rpx 48rpx;
		.title{
			padding: 24rpx 0;
			margin: 0 24rpx;
			border-bottom: 1px solid #f2f2f2;
		}
		.item{
			padding: 16rpx 24rpx;
			text{
				color: #ff6f03;
			}
		}
		.total{
			padding: 24rpx 0;
			margin: 0 24rpx;
			border-top: 1px solid #f2f2f2;
			align-items: flex-end;
		}
	}
	.dates-box{
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 16rpx 48rpx 16rpx 48rpx;
		padding: 24rpx;
		.block_list_view{
				width: 606rpx;
				// height: 320rpx;
				background-color: rgba(236,237,250,0.32);
				border-radius: 16rpx;
				padding: 24rpx;
				font-size: 26rpx;
				position: relative;
				.time_list{
					width: 100%;
					overflow: hidden;
					height: auto;
					transition:height 0.5s;
				}
				.time_item{
					line-height: 36rpx;
					&:not(:last-child){
						margin-bottom: 8rpx;
					}
				}
				.get_more{
					margin-top: 24rpx;
					text-align: center;
				}
		}
		.title{
			padding: 0rpx 24rpx  26rpx 24rpx ;
		}
		.item{
			margin-bottom: 10rpx;
		}
		.more{
			margin-top: 16rpx;
			color: #999999;
		}
	}
	.payment-box{
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 16rpx 48rpx 16rpx 48rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
		.item{
			padding: 24rpx 24rpx 0 24rpx;
		}
		.title{
			padding: 24rpx;
			border-bottom: 1px solid #f2f2f2;
		}
		.icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 6rpx;
		}
		.payment-index{
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>
